<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" href="css/alert.css">
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script src="js/vue.js"></script>
		<!--<script src="//unpkg.com/element-ui@2.0.7/lib/index.js"></script>-->
		<script src="js/element-ui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/alert.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>

		<title>商店</title>
		<style type="text/css">
			.el-pagination.is-background .el-pager li.active {
				background-color: #00b8ee;
				color: #fff;
			}
		</style>
	</head>

	<body>
		<div class="top_bar_wrap">
			<div class="top_bar">
				<div class="top_bar_lf lf">
					您好，欢迎来到爱贝宠宠物网！
				</div>
				<div class="top_bar_rg rg">
					<a class="login rg" href="login.html">登录</a>
					<a class="rigester rg" href="register.html">注册</a>
					<a href="shopCar.html"><span class="shop_car rg">购物车&nbsp;<span>0</span></span></a>
					<a class="help rg" href="#">帮助中心</a>
					<a class="help rg" href="my_account.html">我的账户</a>
				</div>
			</div>
		</div>
		<div class="header_wrap">
			<div class="header_left lf">
				<a href="index.html"><img src="images/logo.png" /></a>
			</div>
			<div class="header_center lf">
				<div class="search_wrap">
					<select class="lf" name="">
						<option value="">商品</option>
					</select>
					<input class="lf search_content" type="text" />
					<input class="lf search_btn" type="button" name="" id="" value="搜索" />
				</div>
			</div>
			<div class="header_right lf">
				<div class="lf phone_logo">
					<img src="images/icon_phone.jpg" />
				</div>
				<div class="lf">
					<p class="service_title">客户服务电话</p>
					<p class="service_num">4006007272</p>
				</div>
			</div>
		</div>
		<!--菜单部分-->
		<div class="menu">
			<div class="menu_inner">
				<ul>
					<li class="whole_goods_menu selected">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-liebiaoshitucaidan"></use>
						</svg>
						<a href="javascript:void(0)">全部商品分类</a>
					</li>
					<li>
						<a href="index.html">首页</a>
					</li>
					<li class="active">
						<a href="product.html">宠物商品</a>
					</li>
					<!--<li>
						<a href="product.html">宠物商店</a>
					</li>-->
				</ul>
				<!--下拉菜单-->
				<div class="drop_down_menu">
					<ul>
						<li class="active" belongto="dog">
							<span class="drop_down_menu_text">狗狗专区</span>
							<span class="arrow">&gt;</span>
						</li>
						<li belongto="cat">
							<span class="drop_down_menu_text">猫咪专区</span>
							<span class="arrow">&gt;</span>
						</li>
						<li belongto="pet">
							<span class="drop_down_menu_text">小宠专区</span>
							<span class="arrow">&gt;</span>
						</li>
					</ul>
				</div>
				<div class="down_menu_right" belongto='dog'>
					<dl>
						<dt>按品牌分  <span class="arrow_right">&gt;</span></dt>
						<!--<dd>爱丽思IRIS</dd>
						<dd>爱丽思IRIS</dd>
						<dd>爱丽思IRIS</dd>-->
					</dl>
					<dl>
						<dt>按功能分 <span class="arrow_right">&gt;</span></dt>
						<!--<dd>户外出行</dd>
						<dd>营养食品</dd>
						<dd>洗浴清洁</dd>
						<dd>玩具用品</dd>-->
					</dl>
				</div>
				<div class="down_menu_right" belongto='cat'>
					<dl>
						<dt>按品牌分  <span class="arrow_right">&gt;</span></dt>

					</dl>
					<dl>
						<dt>按功能分 <span class="arrow_right">&gt;</span></dt>

					</dl>
				</div>
				<div class="down_menu_right" belongto='pet'>
					<dl>
						<dt>按品牌分  <span class="arrow_right">&gt;</span></dt>

					</dl>
					<dl>
						<dt>按功能分 <span class="arrow_right">&gt;</span></dt>

					</dl>
				</div>
			</div>
		</div>
		<div class="product_page_content">
			<div class="product_nav">
				<!--<a href="index.html">首页</a>>
				<a href="#">狗狗专区</a>>-->
			</div>
			<div class="product_brand">
				<p>按品牌分:</p>
				<ul id="product_brands">
					<li v-for="list in brands_list" :data-id="list.id">
						<img :src="'/public'+ list.logo" alt="">
					</li>
				</ul>
				<!--<div class="multiple_choice">+&nbsp;多选</div>-->
			</div>
			<div class="product_function">
				<p>按功能分:</p>
				<ul id="product_function">
					<li v-for="list in function_list" :data-id='list.id'>{{list.name}}</li>
				</ul>
			</div>
			<div class="product_dispatch" id="product_dispatch">
				<p>配送至</p>
				<div>
					<select name="" id="" class="js_select_area">
						<option v-for="list in product_dispatch" :value="list.area_id">{{list.area_name}}</option>
					</select>
				</div>
				<div><input class="js_free_shopping" type="checkbox"><span></span>包邮</div>
				<div><input class="js_available_goods" type="checkbox"><span></span>仅显示有货</div>
				<div class="all">
					共计<span class="all_product js_all_product_num">12</span>个商品
					<!--<button class="prev_page">&lt;</button>
					<span class="current_page">1</span>/<span class="all_page">12</span>
					<button calss="next_page">&gt;</button>-->
				</div>
			</div>
			<div class="product_list" id="product_list">
				<div v-for='list in product_list'>
					<li :data-goodsid="list.id">
						<!--<img src="images/product.jpg" alt="">-->
						<img :src="'/public'+list.logo" alt="">
						<p>
							<span class="price">&yen;{{list.sell_price}}</span>
						</p>
						<p class="product_name">{{list.name}}</p>
						<p>
							<span class="sold_out">已售{{list.id}}件</span>
							<img class="ico_shop_car" src="images/shop_car.png" alt="">
						</p>
					</li>
				</div>
			</div>

			<!--<div class="btn_group">
				<button class="prev_page current">上一页</button>
				<button class="current">1</button>
				<button>2</button>
				<button>3</button>
				<button class="next_page">下一页</button>
				<span>共42条记录</span>
			</div>-->
			<!--分页-->
			<div id="pagination" style="text-align: right;">
				<el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next, jumper" :total=total :page-size=20>
				</el-pagination>
			</div>
		</div>
		<div class="footer">
			<p>版权所有：天津晟联美图贸易有限公司</p>
			<p>Copyright © 2017 http://www.ibabypet.com.cn 爱贝宠物网 &nbsp; 津ICP备17006246号</p>
		</div>
		<script src="js/product.js" type="text/javascript" charset="utf-8"></script>

	</body>

</html>